<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>设备巡检系统</title>
    <script src="js/jquery-3.7.1.js"></script>
    <style>
        body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f5f5f5; }
        .header { background-color: #409EFF; color: white; padding: 20px; display: flex; justify-content: space-between; align-items: center; }
        .nav { background-color: #333; overflow: hidden; display: flex; }
        .nav a { color: white; padding: 14px 16px; text-decoration: none; font-size: 17px; }
        .nav a:hover { background-color: #ddd; color: black; }
        .nav a.active { background-color: #f44336; color: white; }
        .container { padding: 20px; max-width: 1200px; margin: 0 auto; }
        .equipment-table { width: 100%; border-collapse: collapse; margin-top: 20px; background-color: white; box-shadow: 0 0 5px rgba(0,0,0,0.1); }
        .equipment-table th, .equipment-table td { border: 1px solid #ddd; padding: 12px 8px; text-align: left; }
        .equipment-table th { background-color: #f2f2f2; font-weight: bold; }
        .operation-btn { padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer; margin-right: 5px; }
        .edit-btn { background-color: #409EFF; color: white; }
        .delete-btn { background-color: #f44336; color: white; }
        .check-btn { background-color: #67c23a; color: white; }
        .add-btn { padding: 8px 20px; background-color: #67c23a; color: white; border: none; border-radius: 4px; cursor: pointer; margin-bottom: 10px; font-size: 14px; }
        .modal-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; z-index: 999; }
        .modal { width: 500px; background: #fff; border-radius: 8px; box-shadow: 0 0 20px rgba(0,0,0,0.2); overflow: hidden; }
        .modal-header { padding: 15px; background-color: #f8f9fa; border-bottom: 1px solid #ddd; font-size: 18px; font-weight: bold; }
        .modal-body { padding: 20px; }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
        .form-group input { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }
        .modal-footer { padding: 15px; background-color: #f8f9fa; border-top: 1px solid #ddd; text-align: right; }
        .modal-footer button { padding: 8px 20px; margin-left: 10px; border: none; border-radius: 4px; cursor: pointer; }
        .btn-save { background-color: #409EFF; color: white; }
        .btn-cancel { background-color: #ccc; color: #333; }
        body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f5f5f5; }
        .header { background-color: #409EFF; color: white; padding: 20px; text-align: center; }
        .container { padding: 20px; max-width: 1200px; margin: 0 auto; }
        .task-table { width: 100%; border-collapse: collapse; margin-top: 20px; background-color: white; box-shadow: 0 0 5px rgba(0,0,0,0.1); }
        .task-table th, .task-table td { border: 1px solid #ddd; padding: 12px 8px; text-align: left; }
        .task-table th { background-color: #f2f2f2; font-weight: bold; }
        .operation-btn { padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer; margin-right: 5px; }
        .edit-btn { background-color: #409EFF; color: white; }
        .delete-btn { background-color: #f44336; color: white; }
        .modal-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; z-index: 999; }
        .modal { width: 500px; background: #fff; border-radius: 8px; box-shadow: 0 0 20px rgba(0,0,0,0.2); overflow: hidden; }
        .modal-header { padding: 15px; background-color: #f8f9fa; border-bottom: 1px solid #ddd; font-size: 18px; font-weight: bold; }
        .modal-body { padding: 20px; }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
        .form-group select, .form-group input { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }
        .modal-footer { padding: 15px; background-color: #f8f9fa; border-top: 1px solid #ddd; text-align: right; }
        .modal-footer button { padding: 8px 20px; margin-left: 10px; border: none; border-radius: 4px; cursor: pointer; }
        .btn-save { background-color: #409EFF; color: white; }
        .btn-cancel { background-color: #ccc; color: #333; }
        .status-pending { color: #FF9800; font-weight: bold; }
        .status-processing { color: #2196F3; font-weight: bold; }
        .status-completed { color: #4CAF50; font-weight: bold; }
    </style>
</head>
<body>
<div class="header">
    <h1>商场消防云平台</h1>
</div>
<div class="nav">
    <a href="main.jsp">首页</a>
    <a href="fire_alarm_list.jsp">火灾报警系统</a>
    <a href="equipment_management.jsp" >消防设备管理系统</a>
    <a href="inspection_system.jsp"class="active" >设备巡检系统</a>
    <a href="video_monitoring.jsp">视频监控系统</a>
    <a href="emergency_plan.jsp">应急预案管理</a>
    <%
        String role = (String) session.getAttribute("role");
        if ("管理人员".equals(role)) {
    %>
    <a href="duty_staff.jsp">检查人员管理</a>
    <a href="system.jsp">系统设置</a>

    <% } %>
    <a href="change_password.jsp">修改密码</a>
</div>

<div class="container">
    <h2>巡检任务列表</h2>
    <table class="task-table" id="taskTable">
        <thead>
        <tr>
            <th>ID</th>
            <th>设备编号</th>
            <th>设备状态</th>
            <th>执行人员</th>
            <th>任务状态</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!-- 数据将通过 AJAX 加载 -->
        </tbody>
    </table>

    <!-- 编辑弹窗 -->
    <div class="modal-mask" id="modalMask">
        <div class="modal">
            <div class="modal-header" id="modalTitle">编辑巡检任务</div>
            <div class="modal-body">
                <input type="hidden" id="taskId" name="id">
                <div class="form-group">
                    <label for="checkerId">选择执行人员：</label>
                    <select id="checkerId" name="checkerId">
                        <!-- 通过 AJAX 加载检查人员选项 -->
                    </select>
                </div>
                <div class="form-group">
                    <label for="taskStatus">任务状态：</label>
                    <select id="taskStatus" name="taskStatus">
                        <option value="待执行">待执行</option>
                        <option value="执行中">执行中</option>
                        <option value="已完成">已完成</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn-cancel" onclick="closeModal()">取消</button>
                <button class="btn-save" onclick="saveTask()">保存</button>
            </div>
        </div>
    </div>
</div>

<script>
    // 页面加载时加载巡检任务和检查人员
    $(document).ready(function() {
        loadTasks();
        loadCheckers();
    });

    // 加载巡检任务列表
    function loadTasks() {
        $.ajax({
            url: "InspectionSystemServlet",
            method: "GET",
            data: { action: "listTasks" },
            dataType: "json",
            success: function(data) {
                var tbody = $("#taskTable tbody");
                tbody.empty();

                if (data.error) {
                    tbody.append("<tr><td colspan='7' style='text-align: center; color: red;'>" + data.error + "</td></tr>");
                    return;
                }

                if (data.length === 0) {
                    tbody.append("<tr><td colspan='7' style='text-align: center; color: #999;'>暂无数据</td></tr>");
                    return;
                }

                // 渲染表格数据
                data.forEach(function(task) {
                    // 设置任务状态样式
                    let statusClass = "";
                    switch(task.taskStatus) {
                        case "待执行":
                            statusClass = "status-pending";
                            break;
                        case "执行中":
                            statusClass = "status-processing";
                            break;
                        case "已完成":
                            statusClass = "status-completed";
                            break;
                    }

                    tbody.append(
                        "<tr>" +
                        "<td>" + task.id + "</td>" +
                        "<td>" + task.equipmentNo + "</td>" +
                        "<td>" + task.equipmentStatus + "</td>" +
                        "<td>" + (task.checkerName || "未分配") + "</td>" +
                        "<td><span class='" + statusClass + "'>" + task.taskStatus + "</span></td>" +
                        "<td>" + task.createTime + "</td>" +
                        "<td>" +
                        "<button class='operation-btn edit-btn' onclick=\"editTask(" + task.id + ")\">编辑</button>" +
                        "<button class='operation-btn delete-btn' onclick=\"deleteTask(" + task.id + ")\">删除</button>" +
                        "</td>" +
                        "</tr>"
                    );
                });
            },
            error: function() {
                $("#taskTable tbody").html("<tr><td colspan='7' style='color: red; text-align: center;'>数据加载失败，请稍后重试</td></tr>");
            }
        });
    }

    // 加载检查人员列表（用于下拉选择）
    function loadCheckers() {
        $.ajax({
            url: "InspectionSystemServlet",
            method: "GET",
            data: { action: "listCheckers" },
            dataType: "json",
            success: function(data) {
                var checkerSelect = $("#checkerId");
                checkerSelect.empty();

                if (data.error) {
                    checkerSelect.append("<option value=''>加载人员失败</option>");
                    return;
                }

                // 添加默认选项
                checkerSelect.append("<option value=''>请选择执行人员</option>");

                // 添加检查人员选项 - 修正：只显示 name 字段
                data.forEach(function(checker) {
                    checkerSelect.append(
                        "<option value='" + checker.id + "'>" +
                        checker.name +  // 只显示 name 字段，避免 undefined
                        "</option>"
                    );
                });
            },
            error: function() {
                $("#checkerId").html("<option value=''>加载人员失败</option>");
            }
        });
    }

    // 显示编辑弹窗 - 修正了 AJAX 请求的 action 参数
    function editTask(id) {
        $.ajax({
            url: "InspectionSystemServlet",
            method: "GET",
            data: {
                action: "getTaskById",  // 修改：使用专门的 action 获取单个任务
                id: id
            },
            dataType: "json",
            success: function(data) {
                if (!data || data.length === 0) {
                    alert("未找到对应任务");
                    return;
                }

                var task = data[0];

                // 填充表单数据
                $("#taskId").val(task.id);
                $("#checkerId").val(task.checkerId || "");
                $("#taskStatus").val(task.taskStatus || "待执行");

                // 显示弹窗
                $("#modalMask").css("display", "flex");
            },
            error: function() {
                alert("获取数据失败，请重试");
            }
        });
    }

    // 关闭弹窗
    function closeModal() {
        $("#modalMask").css("display", "none");
    }

    // 删除任务
    function deleteTask(id) {
        if (!confirm("确定要删除这条巡检任务吗？")) {
            return;
        }

        $.ajax({
            url: "InspectionSystemServlet",
            method: "GET",
            data: {
                action: "delete",
                id: id
            },
            dataType: "json",
            success: function(res) {
                if (res.success) {
                    alert("删除成功");
                    loadTasks();
                } else {
                    alert("删除失败：" + (res.error || "未知错误"));
                }
            },
            error: function() {
                alert("网络异常，请重试");
            }
        });
    }

    // 保存任务（更新任务信息）
    function saveTask() {
        var taskId = $("#taskId").val();
        var checkerId = $("#checkerId").val();
        var taskStatus = $("#taskStatus").val();

        // 表单验证
        if (!checkerId) {
            alert("请选择执行人员");
            return;
        }

        $.ajax({
            url: "InspectionSystemServlet",
            method: "POST",
            data: {
                action: "update",
                id: taskId,
                checkerId: checkerId,
                taskStatus: taskStatus
            },
            dataType: "json",
            success: function(res) {
                if (res.success) {
                    alert("更新成功");
                    closeModal();
                    loadTasks();
                } else {
                    alert("操作失败：" + (res.error || "未知错误"));
                }
            },
            error: function() {
                alert("网络异常，请重试");
            }
        });
    }
</script>
</body>
</html>